import 'package:common_utils/common_utils.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:yp/config/config.dart';
import 'package:yp/helper.dart';
import 'package:yp/logic.dart';
import 'package:yp/router.dart';
import 'package:yp/utils/util.dart';

import 'logic.dart';
import 'state.dart';

class MallLoginPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MallLoginPage();
  }
}

class _MallLoginPage extends State<MallLoginPage> {
  final MallLoginLogic logic = Get.put(MallLoginLogic());
  final MallLoginState state = Get.find<MallLoginLogic>().state;

  Widget getLoginStyleWidget() {
    if (Config.loginScreenStyle == '1') {
      return Column(
        children: [
          // 手机号 密码
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              TextField(
                controller: state.phoneTextController,
                focusNode: state.phoneFocusNode,
                maxLines: 1,
                style: TextStyle(
                  color: Color(0xff222222),
                  fontSize: 16,
                ),
                onChanged: (value) {
                  logic.textControllerClick();
                },
                keyboardType: TextInputType.phone,
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.symmetric(vertical: setWidth(36)),
                  hintText: '请输入手机号',
                  hintStyle: TextStyle(
                    color: Color(0xffD2D2D2),
                    fontSize: 16,
                  ),
                  enabledBorder: UnderlineInputBorder(
                    borderSide: BorderSide(color: Color(0xffEEEEEE)),
                  ),
                  focusedBorder: UnderlineInputBorder(
                    borderSide: BorderSide(color: Color(0xffEEEEEE)),
                  ),
                ),
              ),
              TextField(
                controller: state.passwordTextController,
                focusNode: state.passwordFocusNode,
                maxLines: 1,
                style: TextStyle(
                  color: Color(0xff222222),
                  fontSize: 16,
                ),
                onChanged: (value) {
                  logic.textControllerClick();
                },
                obscureText: state.passwordShow,
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.symmetric(vertical: setWidth(36)),
                  hintText: '请输入密码',
                  hintStyle: TextStyle(
                    color: Color(0xffD2D2D2),
                    fontSize: 16,
                  ),
                  suffixIcon: IconButton(
                    onPressed: () {
                      setState(() {
                        state.passwordShow = !state.passwordShow;
                      });
                    },
                    icon: Icon(
                      //根据passwordVisible状态显示不同的图标
                      state.passwordShow == true
                          ? Icons.visibility
                          : Icons.visibility_off,
                      color: Color(0xffcccccc),
                    ),
                  ),
                  enabledBorder: UnderlineInputBorder(
                    borderSide: BorderSide(color: Color(0xffEEEEEE)),
                  ),
                  focusedBorder: UnderlineInputBorder(
                    borderSide: BorderSide(color: Color(0xffEEEEEE)),
                  ),
                ),
              ),
            ],
          ),

          // 登录按钮
          Padding(
            padding: EdgeInsets.only(
              top: setWidth(26),
              bottom: setWidth(40),
            ),
            child: GestureDetector(
              onTap: () {
                if (state.loginBool) {
                  print(
                      '立即登录 点击事件！！！ state.choosePrivacyAgreement = ${state.choosePrivacyAgreement}');
                  if (!RegexUtil.isMobileSimple(
                      state.phoneTextController.text)) {
                    toast("手机号格式错误");
                    return;
                  }
                  logic.onSubmit();
                }
              },
              child: Container(
                height: setWidth(90),
                decoration: BoxDecoration(
                  color: Color(0xffEA5504)
                      .withOpacity(state.loginBool ? 1.0 : 0.5),
                  borderRadius: BorderRadius.circular(setWidth(45)),
                ),
                alignment: Alignment.center,
                child: Text(
                  '立即登录',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 18,
                  ),
                ),
              ),
            ),
          ),
          // 验证码登录   忘记密码
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text.rich(
                TextSpan(
                  children: [
                    TextSpan(
                      text: '验证码登录',
                      style: TextStyle(
                        color: Color(0xff666666),
                        fontSize: 14,
                      ),
                      recognizer: TapGestureRecognizer()
                        ..onTap = () {
                          print('验证码登录  点击事件！！！');
                          if (state.choosePrivacyAgreement) {
                            Get.toNamed(RouteConfig.mallVerificationCodeLogin);
                          } else {
                            toast('请先同意阅读并同意《服务协议》和《用户协议》');
                            /* Get.snackbar('提示', '请先同意阅读并同意《服务协议》和《用户协议》',
                                      colorText: Colors.white,
                                      backgroundColor: Colors.black87); */
                          }
                          // Get.toNamed(RouteConfig.mallVerificationCodeLogin);
                        },
                    ),
                    /*
                                    WidgetSpan(
                                      child: Padding(
                                        padding: EdgeInsets.symmetric(horizontal: setWidth(40)),
                                        child: Container(
                                          height: setWidth(30),
                                          width: setWidth(1),
                                          color: Color(0xff666666),
                                        ),
                                      ),
                                    ),
                                    TextSpan(
                                      text: '忘记密码',
                                      style: TextStyle(
                                        color: Color(0xff666666),
                                        fontSize: 14,
                                      ),
                                      recognizer: TapGestureRecognizer()
                                        ..onTap = () {
                                          print('忘记密码  点击事件！！！');
                                          Get.toNamed(RouteConfig.resetPassword);
                                        },
                                    ),
                                    WidgetSpan(
                                      child: Padding(
                                        padding: EdgeInsets.symmetric(horizontal: setWidth(40)),
                                        child: Container(
                                          height: setWidth(30),
                                          width: setWidth(1),
                                          color: Color(0xff666666),
                                        ),
                                      ),
                                    ),
                                    TextSpan(
                                      text: '注册',
                                      style: TextStyle(
                                        color: Color(0xff666666),
                                        fontSize: 14,
                                      ),
                                      recognizer: TapGestureRecognizer()
                                        ..onTap = () {
                                          print("点击去申请koc");
                                          Get.toNamed(RouteConfig.applykoc);
                                        },
                                    ),

                                     */
                  ],
                ),
              ),
            ],
          ),
        ],
      );
    } else {
      return Padding(
        padding: EdgeInsets.only(
          top: setWidth(26),
          bottom: setWidth(40),
        ),
        child: GestureDetector(
          onTap: () {
            if (state.choosePrivacyAgreement) {
              final arguments = Get.arguments;
              if (kIsWeb) {
                // toast(getQueryVariable('page').toString());
                var page = getQueryVariable('page').toString();
                if (page == "random_amount") {
                  var url = Config.WEB_URL +
                      'mall_verification_code_login?activity_num_id=${getQueryVariable('activity_num_id')}&event_num_id=${getQueryVariable('event_num_id')}&page=random_amount';

                  webpay(url);
                } else if (page == "collect_coupons") {
                  var url = Config.WEB_URL +
                      'mall_verification_code_login?from_usr_num_id=${getQueryVariable('from_usr_num_id')}&seriesID=${getQueryVariable('seriesID')}&page=collect_coupons';

                  webpay(url);
                } else {
                  Get.toNamed(RouteConfig.mallVerificationCodeLogin,
                      arguments: arguments);
                }
              } else {
                Get.toNamed(RouteConfig.mallVerificationCodeLogin,
                    arguments: arguments);
              }
            } else {
              toast('请先同意阅读并同意《服务协议》和《用户协议》');
              /* Get.snackbar('提示', '请先同意阅读并同意《服务协议》和《用户协议》',
                                      colorText: Colors.white,
                                      backgroundColor: Colors.black87); */
            }
          },
          child: Container(
            height: setWidth(90),
            decoration: BoxDecoration(
              color: Color(0xffEA5504).withOpacity(1.0),
              borderRadius: BorderRadius.circular(setWidth(45)),
            ),
            alignment: Alignment.center,
            child: Text(
              '手机登录',
              style: TextStyle(
                color: Colors.white,
                fontSize: 18,
              ),
            ),
          ),
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GetBuilder<MallLoginLogic>(
        builder: (logic) {
          return ListView(
            padding: EdgeInsets.zero,
            children: [
              Container(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height,
                padding: EdgeInsets.symmetric(horizontal: setWidth(40)),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          // 关闭
                          GestureDetector(
                            onTap: () {
                              Get.back();
                            },
                            child: Padding(
                              padding: EdgeInsets.only(top: setWidth(80)),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.end,
                                children: [
                                  Image.asset(
                                    'assets/images/close_images.png',
                                    width: setWidth(50),
                                    height: setWidth(50),
                                    fit: BoxFit.fill,
                                  ),
                                ],
                              ),
                            ),
                          ),
                          // logo图
                          Padding(
                            padding: EdgeInsets.only(
                              top: setWidth(150),
                              bottom: setWidth(100),
                            ),
                            child: ClipRRect(
                              borderRadius: BorderRadius.circular(setWidth(30)),
                              child: Image.asset(
                                'assets/images/logo@3x.png',
                                width: setWidth(500),
                                height: setWidth(145),
                                fit: BoxFit.fill,
                              ),
                            ),
                          ),
                          getLoginStyleWidget(),
                          /*
                          // 手机号 密码
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              TextField(
                                controller: state.phoneTextController,
                                focusNode: state.phoneFocusNode,
                                maxLines: 1,
                                style: TextStyle(
                                  color: Color(0xff222222),
                                  fontSize: 16,
                                ),
                                onChanged: (value) {
                                  logic.textControllerClick();
                                },
                                keyboardType: TextInputType.phone,
                                decoration: InputDecoration(
                                  contentPadding: EdgeInsets.symmetric(vertical: setWidth(36)),
                                  hintText: '请输入手机号',
                                  hintStyle: TextStyle(
                                    color: Color(0xffD2D2D2),
                                    fontSize: 16,
                                  ),
                                  enabledBorder: UnderlineInputBorder(
                                    borderSide: BorderSide(color: Color(0xffEEEEEE)),
                                  ),
                                  focusedBorder: UnderlineInputBorder(
                                    borderSide: BorderSide(color: Color(0xffEEEEEE)),
                                  ),
                                ),
                              ),
                              TextField(
                                controller: state.passwordTextController,
                                focusNode: state.passwordFocusNode,
                                maxLines: 1,
                                style: TextStyle(
                                  color: Color(0xff222222),
                                  fontSize: 16,
                                ),
                                onChanged: (value) {
                                  logic.textControllerClick();
                                },
                                obscureText: state.passwordShow,
                                decoration: InputDecoration(
                                  contentPadding: EdgeInsets.symmetric(vertical: setWidth(36)),
                                  hintText: '请输入密码',
                                  hintStyle: TextStyle(
                                    color: Color(0xffD2D2D2),
                                    fontSize: 16,
                                  ),
                                  suffixIcon: IconButton(
                                    onPressed: () {
                                      setState(() {
                                        state.passwordShow = !state.passwordShow;
                                      });
                                    },
                                    icon: Icon(
                                      //根据passwordVisible状态显示不同的图标
                                      state.passwordShow == true ? Icons.visibility : Icons.visibility_off,
                                      color: Color(0xffcccccc),
                                    ),
                                  ),
                                  enabledBorder: UnderlineInputBorder(
                                    borderSide: BorderSide(color: Color(0xffEEEEEE)),
                                  ),
                                  focusedBorder: UnderlineInputBorder(
                                    borderSide: BorderSide(color: Color(0xffEEEEEE)),
                                  ),
                                ),
                              ),
                            ],
                          ),

                          // 登录按钮
                          Padding(
                            padding: EdgeInsets.only(
                              top: setWidth(26),
                              bottom: setWidth(40),
                            ),
                            child: GestureDetector(
                              onTap: () {
                                if (state.loginBool) {
                                  print('立即登录 点击事件！！！ state.choosePrivacyAgreement = ${state.choosePrivacyAgreement}');
                                  if(!RegexUtil.isMobileSimple(state.phoneTextController.text)){
                                    toast("手机号格式错误");
                                    return;
                                  }
                                  logic.onSubmit();
                                }
                              },
                              child: Container(
                                height: setWidth(90),
                                decoration: BoxDecoration(
                                  color: Color(0xffEA5504).withOpacity(state.loginBool ? 1.0 : 0.5),
                                  borderRadius: BorderRadius.circular(setWidth(45)),
                                ),
                                alignment: Alignment.center,
                                child: Text(
                                  '立即登录',
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 18,
                                  ),
                                ),
                              ),
                            ),
                          ),
                          // 验证码登录   忘记密码
                          Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Text.rich(
                                TextSpan(
                                  children: [
                                    TextSpan(
                                      text: '验证码登录',
                                      style: TextStyle(
                                        color: Color(0xff666666),
                                        fontSize: 14,
                                      ),
                                      recognizer: TapGestureRecognizer()
                                        ..onTap = () {
                                          print('验证码登录  点击事件！！！');
                                          if (state.choosePrivacyAgreement) {
                                            Get.toNamed( RouteConfig.mallVerificationCodeLogin);
                                          } else {
                                            toast('请先同意阅读并同意《服务协议》和《用户协议》');
                                            /* Get.snackbar('提示', '请先同意阅读并同意《服务协议》和《用户协议》',
                                      colorText: Colors.white,
                                      backgroundColor: Colors.black87); */
                                          }
                                         // Get.toNamed(RouteConfig.mallVerificationCodeLogin);
                                        },
                                    ),
                                    /*
                                    WidgetSpan(
                                      child: Padding(
                                        padding: EdgeInsets.symmetric(horizontal: setWidth(40)),
                                        child: Container(
                                          height: setWidth(30),
                                          width: setWidth(1),
                                          color: Color(0xff666666),
                                        ),
                                      ),
                                    ),
                                    TextSpan(
                                      text: '忘记密码',
                                      style: TextStyle(
                                        color: Color(0xff666666),
                                        fontSize: 14,
                                      ),
                                      recognizer: TapGestureRecognizer()
                                        ..onTap = () {
                                          print('忘记密码  点击事件！！！');
                                          Get.toNamed(RouteConfig.resetPassword);
                                        },
                                    ),
                                    WidgetSpan(
                                      child: Padding(
                                        padding: EdgeInsets.symmetric(horizontal: setWidth(40)),
                                        child: Container(
                                          height: setWidth(30),
                                          width: setWidth(1),
                                          color: Color(0xff666666),
                                        ),
                                      ),
                                    ),
                                    TextSpan(
                                      text: '注册',
                                      style: TextStyle(
                                        color: Color(0xff666666),
                                        fontSize: 14,
                                      ),
                                      recognizer: TapGestureRecognizer()
                                        ..onTap = () {
                                          print("点击去申请koc");
                                          Get.toNamed(RouteConfig.applykoc);
                                        },
                                    ),

                                     */
                                  ],
                                ),
                              ),
                            ],
                          ),

                          // 手机登录
                          Padding(
                            padding: EdgeInsets.only(
                              top: setWidth(26),
                              bottom: setWidth(40),
                            ),
                            child: GestureDetector(
                              onTap: () {
                                if (state.choosePrivacyAgreement) {
                                  Get.toNamed(
                                      RouteConfig.mallVerificationCodeLogin);
                                } else {
                                  toast('请先同意阅读并同意《服务协议》和《用户协议》');
                                  /* Get.snackbar('提示', '请先同意阅读并同意《服务协议》和《用户协议》',
                                      colorText: Colors.white,
                                      backgroundColor: Colors.black87); */
                                }
                              },
                              child: Container(
                                height: setWidth(90),
                                decoration: BoxDecoration(
                                  color: Color(0xffEA5504).withOpacity(1.0),
                                  borderRadius:
                                  BorderRadius.circular(setWidth(45)),
                                ),
                                alignment: Alignment.center,
                                child: Text(
                                  '手机登录',
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 18,
                                  ),
                                ),
                              ),
                            ),
                          ),



                           */
                        ],
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.only(bottom: 20),
                      child: Column(
                        children: [
                          // Row(children: <Widget>[
                          //
                          //   Expanded(child: Divider()),
                          //   Text(" 其它登录方式 "),
                          //   Expanded(child: Divider()),
                          // ]),
                          //fluwx组件不支持web
                          kIsWeb == false
                              ? GestureDetector(
                                  onTap: () {
                                    if (state.choosePrivacyAgreement) {
                                      Config.ShowLoginPageLeftTip=false;
                                      logic.loginWX();
                                    } else {
                                      toast('请先同意阅读并同意《服务协议》和《用户协议》');

                                      /* Get.snackbar('提示', '请先同意阅读并同意《服务协议》和《用户协议》',
                                      colorText: Colors.white,
                                      backgroundColor: Colors.black87); */
                                    }
                                  },
                                  child: Padding(
                                    padding: EdgeInsets.symmetric(vertical: 30),
                                    child: Column(
                                      children: [
                                        // 微信登录
                                        Image.asset(
                                          'assets/images/share1.png',
                                          width: setWidth(100),
                                          height: setWidth(100),
                                          fit: BoxFit.fill,
                                        ),
                                        Text(
                                          '微信登录',
                                          style: TextStyle(
                                            //color: Color(0xffEA5504),
                                            fontSize: 12,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ))
                              : Row(),

                          Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              // 隐私协议 用户协议
                              GestureDetector(
                                onTap: () {
                                  print('同意 用户协议');
                                  logic.choosePrivacyAgreement(
                                      !state.choosePrivacyAgreement);
                                },
                                behavior: HitTestBehavior.opaque,
                                child: Container(
                                  width: setWidth(44),
                                  height: setWidth(76),
                                  alignment: Alignment.centerLeft,
                                  child: Image.asset(
                                    state.choosePrivacyAgreement
                                        ? 'assets/images/ok@2x.png'
                                        : 'assets/images/save.png',
                                    width: setWidth(28),
                                    height: setWidth(28),
                                    fit: BoxFit.cover,
                                  ),
                                ),
                              ),
                              Text.rich(
                                TextSpan(
                                  children: [
                                    TextSpan(
                                      text: '同意',
                                      style: TextStyle(
                                        color: Color(0xff666666),
                                        fontSize: 12,
                                      ),
                                    ),
                                    TextSpan(
                                      text: '《注册协议》',
                                      style: TextStyle(
                                        color: Color(0xffEA5504),
                                        fontSize: 12,
                                      ),
                                      recognizer: TapGestureRecognizer()
                                        ..onTap = () {
                                          Get.toNamed(RouteConfig.agreement,
                                              arguments: {
                                                "type": 1,
                                              });
                                          print('1111111《隐私协议》 点击事件！！！');
                                        },
                                    ),
                                    TextSpan(
                                      text: '《隐私协议》',
                                      style: TextStyle(
                                        color: Color(0xffEA5504),
                                        fontSize: 12,
                                      ),
                                      recognizer: TapGestureRecognizer()
                                        ..onTap = () {
                                          Get.toNamed(RouteConfig.agreement,
                                              arguments: {
                                                "type": 2,
                                              });
                                          print('《用户协议》 点击事件！！！');
                                        },
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                    )
                  ],
                ),
              ),
            ],
          );
        },
      ),
    );
  }

  @override
  void dispose() {
    Config.ShowLoginPageLeftTip=false;
    Get.delete<MallLoginLogic>();
    super.dispose();
  }

  @override
  void initState() {
    Config.ShowLoginPageLeftTip=true;
    if (!kIsWeb) {
      GlobalLogic.getLoginScreenStyle();
    } else {
      Config.loginScreenStyle = '0';
    }
    super.initState();
  }
}
